<template>
  <div class="comprehensive-table-container">
    <el-alert
      :closable="false"
      show-icon
      title="三级路由【缓存路由、固定表格高度、并根据窗口大小自适应】的示例。详情页请点击操作列按钮，支持tab多开并高亮左侧菜单"
      type="success"
    />
    <vab-query-form>
      <vab-query-form-left-panel style="flex: 1; width: auto">
        <el-form-item label="日期:">
          <el-button
            v-for="(item, index) in curTime"
            :key="index"
            size="mini"
            type="primary"
            @click="handleQuery(item)"
          >
            {{ item }}
          </el-button>
          <!--          </div>-->
        </el-form-item>
      </vab-query-form-left-panel>
      <vab-query-form-left-panel style="flex: 1; width: auto">
        <el-form-item label="工单编号:">
          <el-input v-model="queryForm.orderNum" placeholder="请输入工单编号" />
        </el-form-item>
        <el-form-item label="派单开始:">
          <el-date-picker
            v-model="queryForm.dispatchTimeStart"
            align="right"
            placeholder="派单时间开始日期"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="派单结束:">
          <el-date-picker
            v-model="queryForm.dispatchTimeEnd"
            align="right"
            placeholder="派单时间结束日期"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="市截止开始:">
          <el-date-picker
            v-model="queryForm.deadlineDateStart"
            align="right"
            placeholder="市截止时间开始日期"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="市截止结束:">
          <el-date-picker
            v-model="queryForm.deadlineDateEnd"
            align="right"
            placeholder="市截止时间结束日期"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="挂账开始:">
          <el-date-picker
            v-model="queryForm.guazhangTimeStart"
            align="right"
            placeholder="挂账时间开始日期"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="挂账结束:">
          <el-date-picker
            v-model="queryForm.guazhangTimeEnd"
            align="right"
            placeholder="挂账时间结束日期"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="来电人电话:">
          <el-input
            v-model="queryForm.callerPhone"
            placeholder="请输入来电人电话"
          />
        </el-form-item>
        <el-form-item label="来电人姓名:">
          <el-input
            v-model="queryForm.callerName"
            placeholder="请输入来电人姓名"
          />
        </el-form-item>

        <el-form-item label="来电内容:">
          <el-input v-model="queryForm.majorContent" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="来电标题:">
          <el-input v-model="queryForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="派单类型:">
          <div class="tree-select">
            <treeselect
              v-model="queryForm.isAssign"
              :clear-on-select="false"
              :limit="1"
              :limit-text="count"
              no-children-text="空"
              no-options-text="加载中"
              no-results-text="无"
              :options="isAssignData"
              placeholder="派单类型"
              :show-count="true"
            />
          </div>
        </el-form-item>
        <el-form-item
          v-if="
            rulesa.indexOf('/jsjb/bm') == '-1' &&
            webconfig.is_has_cx_mainOrgStatus == 1
          "
          label="主办工单状态:"
        >
          <div class="tree-select">
            <treeselect
              v-model="queryForm.mainOrgStatus"
              :clear-on-select="false"
              :limit="1"
              :limit-text="count"
              no-children-text="空"
              no-options-text="加载中"
              no-results-text="无"
              :options="organizerStateData"
              placeholder="主办工单状态"
              :show-count="true"
            />
          </div>
        </el-form-item>

        <el-row
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
          "
        >
          <div style="flex: 1; margin-left: 30px">
            <el-form-item>
              <el-button size="small" type="text" @click="handleFold">
                <span v-if="fold">更多筛选</span>
                <span v-else>更多筛选</span>
                <vab-icon
                  class="vab-dropdown"
                  :class="{ 'vab-dropdown-active': fold }"
                  icon="arrow-up-s-line"
                />
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                native-type="submit"
                size="small"
                type="primary"
                @click="handleQuery('')"
              >
                查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                native-type="submit"
                size="small"
                type="primary"
                @click="multipleQuery"
              >
                综合查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-refresh"
                size="small"
                type="warning"
                @click="handleReset"
              >
                重置
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="
                  (routes.name == 'JD_case_zb_yqs' ||
                    routes.name == 'JD_zb_yqs') &&
                  webconfig.is_has_list_zijiangongdan == 1
                "
                v-has="authorityPowerDw"
                icon="el-icon-plus"
                size="small"
                type="success"
                @click="tianjiaanjian"
              >
                添加案件
              </el-button>
            </el-form-item>
            <el-form-item
              v-if="
                routes.name == 'JD_zb_yqs' &&
                webconfig.jsjb_btn_upload_order_word == 1
              "
              v-has="authorityPowerDw"
            >
              <el-button
                icon="el-icon-upload2"
                size="small"
                type="primary"
                @click="handleImportOrder"
              >
                导入工单
              </el-button>
            </el-form-item>
            <el-form-item
              v-if="
                (routes.name == 'JD_zb_yqs' ||
                  routes.name == 'JD_case_zb_yqs') &&
                webconfig.jsjb_btn_upload_order_excel == 1
              "
              v-has="authorityPowerDw"
            >
              <el-button
                icon="el-icon-upload2"
                size="small"
                type="primary"
                @click="handleImportOrderCyExcel"
              >
                导入工单
              </el-button>
            </el-form-item>
            <el-form-item v-has="authorityPowerDw">
              <el-button
                icon="el-icon-upload2"
                size="small"
                type="primary"
                @click="handleImportSanlvhuifangOrder"
              >
                导入原始三率涉及回访案件
              </el-button>
            </el-form-item>
            <el-form-item v-has="authorityPowerDw">
              <el-button
                icon="el-icon-upload2"
                size="small"
                type="primary"
                @click="handleImportKeyAppealsOrder"
              >
                批量导入重点诉求工单编号
              </el-button>
            </el-form-item>
            <el-form-item v-has="authorityPowerDw">
              <el-button
                icon="el-icon-upload2"
                size="small"
                type="primary"
                @click="handleImportYanpanOrder"
              >
                批量导入区中心研判工单
              </el-button>
            </el-form-item>
            <el-form-item v-has="authorityPowerDw">
              <el-button
                icon="el-icon-upload2"
                size="small"
                type="primary"
                @click="handleImportCitykaoheOrder"
              >
                导入市考核明细表
              </el-button>
            </el-form-item>
            <el-form-item
              v-if="
                webconfig.is_has_pitchOnDerivePay == 1 && DerivePay_menu == 1
              "
            >
              <el-button
                icon="el-icon-position"
                size="small"
                type="primary"
                @click="pitchOnDerivePay('EXCEL_select_huifang')"
              >
                导出选中回访台账
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-position"
                size="small"
                type="primary"
                @click="allDerivePay('EXCEL_all_huifang')"
              >
                导出所有回访台账
              </el-button>
            </el-form-item>
            <el-form-item
              v-if="
                webconfig.is_has_batch_sign == 1 &&
                (routes.name == 'JD_zb_dqs' || routes.name == 'beSigned')
              "
            >
              <el-button
                v-has="authorityPowerDw"
                icon="el-icon-position"
                size="small"
                type="primary"
                @click="batchSign()"
              >
                批量签收
              </el-button>
            </el-form-item>

            <el-form-item
              v-if="params.assignUserId == 0"
              v-has="authorityPowerDw"
            >
              <el-input
                v-model="queryForm.lockNum"
                maxlength="99"
                minlength="1"
                placeholder="请输入数量"
                style="width: 100px; margin-left: 8px"
                type="text"
              />
              <el-button
                icon="el-icon-lock"
                :loading="loadings"
                size="small"
                type="danger"
                @click="batchAssignLock"
              >
                {{ getOrderNumText }}
              </el-button>
            </el-form-item>
          </div>
          <div>
            <el-button
              style="margin: 0px 10px 10px 0px"
              type="text"
              @click="clickFullScreen"
            >
              <vab-icon
                :icon="
                  isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'
                "
              />
              <span v-if="isFullscreen">还原</span>
              <span v-else>全屏</span>
            </el-button>
            <el-dropdown
              v-if="approved != 1"
              style="margin: 0 10px 10px 0"
              @command="handleSort"
            >
              <el-button icon="el-icon-sort" size="small" type="text">
                排序
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <div v-if="params.ISHUIFANG == 1">
                    <el-dropdown-item command="1-1">
                      按来电号码升序
                    </el-dropdown-item>
                    <el-dropdown-item command="1-2">
                      按来电号码降序
                    </el-dropdown-item>
                    <el-dropdown-item command="1-3">
                      按回访时间升序
                    </el-dropdown-item>
                    <el-dropdown-item command="1-4">
                      按回访时间降序
                    </el-dropdown-item>
                    <!-- <el-dropdown-item command="1-5">
                  按回访人姓名升序
                </el-dropdown-item>
                <el-dropdown-item command="1-6">
                  按回访人姓名降序
                </el-dropdown-item> -->
                  </div>
                  <div v-else>
                    <el-dropdown-item command="2-1">
                      按派单时间升序
                    </el-dropdown-item>
                    <el-dropdown-item command="2-2">
                      按派单时间降序
                    </el-dropdown-item>
                    <el-dropdown-item command="2-3">
                      按回复市中心时间升序
                    </el-dropdown-item>
                    <el-dropdown-item command="2-4">
                      按回复市中心时间降序
                    </el-dropdown-item>
                    <el-dropdown-item command="2-7">
                      按截止时间升序
                    </el-dropdown-item>
                    <el-dropdown-item command="2-8">
                      按截止时间降序
                    </el-dropdown-item>
                    <!-- <div v-if="isStreet == 0">
                  <el-dropdown-item command="2-5">
                    按下级办结时间升序
                  </el-dropdown-item>
                  <el-dropdown-item command="2-6">
                    按下级办结时间降序
                  </el-dropdown-item>
                </div> -->
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              v-if="approved != 1"
              style="margin: 0 10px 10px 0"
              @command="handleExport"
            >
              <el-button icon="el-icon-download" size="small" type="text">
                导出
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <span v-if="routes.name == 'JQ_query_es'">
                    <el-dropdown-item command="EXCEL_es_select">
                      导出选中到EXCEL(ES)
                    </el-dropdown-item>
                    <el-dropdown-item command="EXCEL_es_all">
                      导出所有到EXCEL(ES)
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="is_has_exports_csv == 1"
                      command="CSV_es_select"
                    >
                      导出选中到CSV(ES)
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="is_has_exports_csv == 1"
                      command="CSV_es_all"
                    >
                      导出所有到CSV(ES)
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="is_has_exports_word == 1"
                      command="WORD_es_select"
                    >
                      导出选中到WORD(ES)
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="is_has_exports_word == 1"
                      command="WORD_es_all"
                    >
                      导出所有到WORD(ES)
                    </el-dropdown-item>
                  </span>
                  <span v-else>
                    <el-dropdown-item command="EXCEL_select">
                      导出选中到EXCEL
                    </el-dropdown-item>
                    <el-dropdown-item command="EXCEL_all">
                      导出所有到EXCEL
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="is_has_exports_csv == 1"
                      command="CSV_select"
                    >
                      导出选中到CSV
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="is_has_exports_csv == 1"
                      command="CSV_all"
                    >
                      导出所有到CSV
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="is_has_exports_word == 1"
                      command="WORD_select"
                    >
                      导出选中到WORD
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="is_has_exports_word == 1"
                      command="WORD_all"
                    >
                      导出所有到WORD
                    </el-dropdown-item>
                  </span>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button
              v-if="approved != 1"
              icon="el-icon-setting"
              size="small"
              type="text"
              @click="handleClickSettingColumn"
            >
              列表设置
            </el-button>
          </div>
        </el-row>
      </vab-query-form-left-panel>
      <vab-query-form-bottom-panel v-if="!multipleFold">
        <el-form
          ref="environmentForm"
          :inline="true"
          label-width="105px"
          :model="environmentForm"
          size="small"
          style="width: 100%"
        >
          <el-row>
            <el-col :span="16">
              <div
                v-for="(item, index) in environmentForm.items"
                :key="index"
                :gutter="24"
              >
                <el-form-item
                  label="查询项"
                  :prop="'items.' + index + '.key'"
                  :rules="{
                    required: true,
                    message: '名称不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-select
                    v-model="item.key"
                    clearable
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="option in projectOption"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="条件"
                  :prop="'items.' + index + '.isNot'"
                  :rules="{
                    required: true,
                    message: '条件不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-select
                    v-model="item.isNot"
                    clearable
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="option in conditionOption"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="关键词"
                  :prop="'items.' + index + '.input'"
                  :rules="{
                    required: true,
                    message: '关键词不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input v-model="item.input" placeholder="请输入关键词" />
                </el-form-item>
                <i
                  v-if="environmentForm.items.length !== 1"
                  class="el-icon-delete"
                  style="
                    font-size: 16px;
                    color: #999;
                    margin-top: 8px;
                    margin-left: 10px;
                  "
                  @click="removeEnvironmentForm(item)"
                ></i>
              </div>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" prop="">
                <el-button
                  class="add"
                  type="primary"
                  @click="addEnvironmentForm"
                >
                  新增
                </el-button>
                <el-radio-group
                  v-model="queryForm.type"
                  @change="changeRadioType"
                >
                  <el-radio :label="0">且</el-radio>
                  <el-radio :label="1">或</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item
            label=""
            prop=""
            style="margin-left: 105px; margin-top: 5px"
          >
            <el-button
              icon="el-icon-search"
              size="small"
              type="primary"
              @click="submitForm('environmentForm')"
            >
              提交综合查询
            </el-button>
            <el-button
              icon="el-icon-refresh"
              size="small"
              type="warning"
              @click="resetMultipleForm('environmentForm')"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-bottom-panel>
    </vab-query-form>

    <el-table
      ref="tableSortRef"
      v-loading="listLoading"
      border
      :data="list"
      :height="height"
      @selection-change="setSelectRows"
      @sort-change="tableSortChange"
    >
      <el-table-column
        align="center"
        show-overflow-tooltip
        type="selection"
        width="55"
      />
      <el-table-column
        align="center"
        label="序号"
        show-overflow-tooltip
        width="55"
      >
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="标题"
        prop="title"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="作者"
        prop="author"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="评级">
        <template #default="{ row }">
          <el-rate v-model="row.rate" disabled />
        </template>
      </el-table-column>
      <el-table-column align="center" label="头像">
        <template #default="{ row }">
          <el-image
            :preview-src-list="imageList"
            preview-teleported
            :src="row.img"
          />
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="点击量"
        prop="pageViews"
        show-overflow-tooltip
        sortable
      />
      <el-table-column
        align="center"
        label="开关"
        prop="switch"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tooltip
            :content="row.switch === 0 ? '点击开启' : '点击关闭'"
            :enterable="false"
            placement="top"
          >
            <el-switch v-model="row.switch" />
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" show-overflow-tooltip>
        <template #default="{ row }">
          <el-tooltip
            class="item"
            :content="row.status"
            effect="dark"
            placement="top-start"
          >
            <el-tag :type="statusFilter(row.status)">
              {{ row.status }}
            </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="时间"
        prop="datetime"
        show-overflow-tooltip
        width="200"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        show-overflow-tooltip
        width="200"
      >
        <template #default="{ row }">
          <el-button text type="primary" @click="handleDetail(row)">
            详情
          </el-button>
          <el-button text type="primary" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button text type="primary" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <edit ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { useTabsStore } from '@/store/modules/tabs'
  import { useRoutesStore } from '@/store/modules/routes'
  import { doDelete, getList } from '@/api/jsjb'
  import { handleMatched, handleTabs } from '@/utils/routes'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'ComprehensiveTable',
    components: {
      Edit: defineAsyncComponent(() => import('@/views/components/TableEdit')),
    },
    setup() {
      const router = useRouter()

      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const $baseAlert = inject('$baseAlert')
      const $baseNotify = inject('$baseNotify')
      const $baseTableHeight = inject('$baseTableHeight')

      const routesStore = useRoutesStore()
      const { getRoutes: routes } = storeToRefs(routesStore)
      const tabsStore = useTabsStore()
      const { changeTabsMeta, addVisitedRoute } = tabsStore

      const state = reactive({
        editRef: null,
        tableSortRef: null,
        fold: false,
        height: $baseTableHeight(3) - 30,
        list: [],
        imageList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
        },
      })

      onActivated(() => {
        state['tableSortRef'].doLayout()
        fetchData()
      })

      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getList(state.queryForm)
        console.log(111, list)
        state.list = list
        const imageList = []
        list.forEach((item) => {
          imageList.push(item.img)
        })
        state.imageList = imageList
        state.total = total
        state.listLoading = false

        setTimeout(() => {
          toggleSelection([state.list[0]])
        }, 0)
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const statusFilter = (status) => {
        const statusMap = {
          published: 'success',
          draft: '',
          deleted: 'danger',
        }
        return statusMap[status]
      }
      const handleFold = () => {
        state.fold = !state.fold
        handleHeight()
      }
      const handleHeight = () => {
        if (state.fold) state.height = $baseTableHeight(2) - 47
        else state.height = $baseTableHeight(3) - 30
      }
      const tableSortChange = () => {
        const imageList = []
        state.list.forEach((item) => {
          imageList.push(item.img)
        })
        state.imageList = imageList
      }
      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const handleAdd = () => {
        state['editRef'].showEdit()
      }
      const handleEdit = (row) => {
        state['editRef'].showEdit(row)
      }
      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids: ids })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }
      const handleDetailStayTable = async () => {
        for (let i = 0; i < state.selectRows.length; i++) {
          const matched = handleMatched(routes.value, '/vab/table/detail')
          const tab = handleTabs({
            ...matched[matched.length - 1],
            query: state.selectRows[i],
          })
          if (tab) {
            await addVisitedRoute(tab)
            await changeTabsMeta({
              title: '详情页',
              meta: {
                title: `${tab.query.title} 详情页`,
              },
            })
          }
        }
      }
      const handleDetail = (row) => {
        if (row.id)
          router.push({
            path: '/vab/table/detail',
            query: {
              ...row,
              timestamp: new Date().getTime(), //允许同一个详情页同时打开多次，否则会触发路由被缓存下次无法刷新的bug
            },
          })
        else {
          if (state.selectRows.length === 1) {
            router.push({
              path: '/vab/table/detail',
              query: {
                ...state.selectRows[0],
                timestamp: new Date().getTime(), //允许同一个详情页同时打开多次，否则会触发路由被缓存下次无法刷新的bug
              },
            })
          } else {
            $baseMessage(
              '请选择一行进行详情页跳转',
              'error',
              'vab-hey-message-error'
            )
          }
        }
      }
      const handleMessage = () => {
        $baseMessage('test1', 'success', false, 'vab-hey-message-success')
      }
      const handleAlert = () => {
        $baseAlert('11')
        // $baseAlert('11', '自定义标题', () => {
        //   /* 可以写回调; */
        // })
        // $baseAlert('11', null, () => {
        //   /* 可以写回调; */
        // })
      }
      const handleConfirm = () => {
        $baseConfirm(
          '你确定要执行该操作?',
          null,
          () => {
            /* 可以写回调; */
          },
          () => {
            /* 可以写回调; */
          }
        )
      }
      const handleNotify = () => {
        $baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
      }
      const toggleSelection = (rows) => {
        if (rows) {
          rows.forEach((row) => {
            state['tableSortRef'].toggleRowSelection(row)
          })
        } else {
          state['tableSortRef'].clearSelection()
        }
      }

      onBeforeMount(() => {
        window.addEventListener('resize', handleHeight)
      })
      onUnmounted(() => {
        window.removeEventListener('resize', handleHeight)
      })
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        handleSizeChange,
        handleCurrentChange,
        queryData,
        statusFilter,
        handleFold,
        handleHeight,
        tableSortChange,
        setSelectRows,
        handleAdd,
        handleEdit,
        handleDelete,
        handleDetailStayTable,
        handleDetail,
        handleMessage,
        handleAlert,
        handleConfirm,
        handleNotify,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
